{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    '@chosen_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    {#<link type="text/css" rel="stylesheet" href="{{ asset('bundles/icsocui/plugin/select2/select2.css') }}"/>#}
    <style>
        .timeLabel{padding-left: 0;width: 172px;display: inline;float: left;}
        .disCheckBox{display: none}
    </style>
{% endblock %}
{% block content %}
<div class="page-content">
            {% set lengthHelp = 'Most queuing telephone number, more than this number will overflow'|trans  %}
            {% set timeHelp = 'Phone line length, more than this time long will overflow'|trans  %}
            {% set ringHelp = 'Over the long queue of ringing back to find other extension'|trans  %}
            {% set waitHelp = 'Call completion to the next allocation interval'|trans  %}
            {% set noansHelp = 'When performing non response operation times reaches the specified number of times'|trans  %}
            {% set waitHelp = 'How many seconds after response interval again to this seat allocation for telephone'|trans  %}
            {% set audioHelp = 'Phone line play tone'|trans  %}
            {{ form_start(form, {'attr':{'id':'validation-form'}}) }}
                {{ form_row(form.que_name) }}
                {{ form_row(form.que_num) }}
                {{ form_row(form.que_priority) }}
                {{ form_row(form.que_type) }}
                {{ form_row(form.que_strategy) }}
                {#{{ form_row(form.brecord) }}#}
                {{ form_row(form.que_length, {'help':lengthHelp}) }}
                {{ form_row(form.que_time, {'help':timeHelp}) }}
                {{ form_row(form.ring_time, {'help':ringHelp}) }}
                {{ form_row(form.next_wait, {'help':waitHelp}) }}
                {{ form_row(form.b_announce) }}
                {#{{ form_row(form.auto_evaluate) }}#}
                {{ form_row(form.noans_times, {'help':noansHelp}) }}
                {{ form_row(form.noans_wait, {'help':waitHelp}) }}
                {{ form_row(form.noans_action) }}
                {{ form_row(form.wait_audio, {'help':audioHelp}) }}
                {{ form_row(form.tellevel) }}
                {% if isEnableGroup %}
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right">所属业务组</label>
                        <div class="col-sm-9">
                            <select data-placeholder="请选择业务组" id="que_info_form_group_belong" class="col-xs-10 col-sm-4 chosen-select tag-input-style" style="width:33%" multiple name="group_belong[]">
                                {% for keyg,group in groups %}
                                    <option value="{{ keyg }}">{{ group }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                {% endif %}
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">是否开启非工作时间语音提示</label>
                    <div class="col-sm-7">
                        <div>
                            <label class="checkbox-inline " style="padding-left: 0">
                                <input type="radio" class="radios" name="turn_up" value="1" checked="checked" onclick="turnUp(1)"> 否</label>
                            <label class="checkbox-inline" style="padding-left: 0">
                                <input type="radio" class="radios" name="turn_up" value="2"  onclick="turnUp(2)"> 是</label>
                        </div>
                    </div>
                </div>
                <div class="form-group disCheckBox">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1" id="date_type_data" dateType="1">选择日期</label>
                    <div class="col-sm-7">
                        <div class="timeLabel">
                            <label class="checkbox-inline " style="padding-left: 0">
                                <input type="radio" class="checked radisDate" name="data_type" value="1" onclick="switchShow1(1,'start_date','end_date')" checked="" > 任意</label>
                            <label class="checkbox-inline" style="padding-left: 0">
                                <input type="radio" class="radisDate" name="data_type" value="2" onclick="switchShow1(2,'start_date','end_date')" > 具体时间</label>
                        </div>
                        <div class="col-xs-10 col-sm-4">
                            <input type="text" id="start_date" name="start_date" class="col-xs-12 col-sm-12 datetype disCheckBox2" disabled="disabled" value="*">
                        </div>
                        <div class="col-xs-10 col-sm-4">
                            <input type="text" id="end_date" name="end_date" class="col-xs-12 col-sm-12 datetype disCheckBox2" disabled="disabled" value="*">
                        </div>
                        <span class="help-button col-xs-3 col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="{{ 'Format: 2000-01-01 or *, * means any'|trans }}" title="" >?</span>
                    </div>
                </div>
                <div class="form-group disCheckBox">
                    <label class="col-sm-3 control-label no-padding-right noWork" for="form-field-1">非工作时间段</label>
                    <div class="col-sm-9">
                        <div class="col-xs-10 col-sm-2">
                            <input type="text" id="start_time1" name="start_time1" class="col-xs-12 col-sm-12 timetype1" value="00-00">
                        </div>
                        <div class="col-xs-10 col-sm-2">
                            <input type="text" id="end_time1" name="end_time1" class="col-xs-12 col-sm-12 timetype1" value="00-00">
                        </div>
                        <div class="col-xs-10 col-sm-7">
                            {% for key,week in weeks %}
                                <label class="checkbox-inline"><input type="checkbox" class=""  name="weeks1[]" value="{{ key }}">{{ week }}</label>
                            {% endfor %}
                        </div>
                        <div class="col-xs-10 col-sm-1">
                            <a style="cursor:pointer" class="disCheckBoxA" onclick="addDiv()">
                                <span class="ui-icon ace-icon fa fa-plus center bigger-110 blue" style=";margin-top: 10px"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="form-group cloneDiv" id="cloneDiv" style="display: none">
                    <label class="col-sm-3 control-label no-padding-right noWork" value="1" for="form-field-1"></label>
                    <div class="col-sm-9">
                        <div class="col-xs-10 col-sm-2">
                            <input type="text" id="start_time1" class="col-xs-12 col-sm-12" aria-invalid="false" name="having" value="1">
                        </div>
                        <div class="col-xs-10 col-sm-2">
                            <input type="text" id="end_time1" class="col-xs-12 col-sm-12" value="00-00">
                        </div>
                        <div class="col-xs-10 col-sm-7">
                            {% for key,week in weeks %}
                                <label class="checkbox-inline"><input type="checkbox" class="weeks"   name="" value="{{ key }}">{{ week }}</label>
                            {% endfor %}
                        </div>
                        <div class="col-xs-10 col-sm-1">
                            <a style="cursor:pointer;" onclick="delDiv(this)">
                                <span class="ui-icon ace-icon fa fa-minus center bigger-110 blue" style=";margin-top: 10px"></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="form-group disCheckBox">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1" id="sound_type_data" soundType="1">非工作时间欢迎语设置</label>
                    <div class="col-sm-7">
                        <div class="col-xs-10 col-sm-6">
                            <label class="checkbox-inline " style="padding-left: 0">
                                <input type="radio" id="ttsType" class="soundType" name="sound_type" value="2" checked="" onclick="switchOver(1)"> 设置语音文字</label>
                            <label class="checkbox-inline" style="padding-left: 0">
                                <input type="radio" class="soundType" name="sound_type" value="1"  onclick="switchOver(2)"> 设置语音文件</label>
                        </div>
                    </div>
                </div>
                <div class="form-group disCheckBox" id="ttsText">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"></label>
                    <div class="col-sm-4">
                        <textarea class="tts_text" name="tts_text" style="width: 300px; height: 50px;max-width: 400px"></textarea>
                    </div>
                    <span class="help-button col-sm-1" data-rel="popover" data-trigger="hover" data-placement="bottom" data-content="自动合成语音" title="" >?</span>
                </div>
                <div class="form-group disCheckBox4" id="soundFile" style="display: none">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"></label>
                    <div class="col-sm-7">
                        <select class="col-xs-10 col-sm-5 "  name="sound_id" id="sound_id">
                            <option value="">选择语音</option>
                            {% for val in sounds %}
                                <option value="{{ val.id }}">{{ val.name }}</option>
                            {% endfor %}
                        </select>
                        <audio id="sound_player" class="align-middle" style="margin-left: 8px;color: white;width: 50%;"
                               controls="controls" src="">{{ 'Your browser does not support the player'|trans }}
                        </audio>
                    </div>
                </div>
                {{ form_row(form.que_id) }}
                {{ create(path('icsoc_queue_index')) }}
            {{ form_end(form) }}
  </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@datepicker_js'
    '@gritter_js'
    '@common_js'
    '@chosen_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    {#<script type="text/javascript" src="{{ asset('bundles/icsocui/plugin/select2/select2.min.js') }}"></script>#}
    <script>
        $("#que_info_form_group_belong").chosen();
        var validator = $('#validation-form').validate({
            {{ jqvalidator() }}
            rules: {
                'que_info_form[que_name]': {
                    required:true,
                    maxlength: 20,
                    remote: {
                        url: '{{ path('icsoc_queue_check') }}',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            que_name: function(){
                                return $('#que_info_form_que_name').val();
                            },
                            que_id: function(){
                                return $('#que_info_form_que_id').val();
                            }
                        }
                    }
                },
                'que_info_form[que_num]': {
                    maxlength: 30,
                    isNumberic: true,
                    remote: {
                        url: '{{ path('icsoc_queue_check') }}',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            que_name: function(){
                                return $('#que_info_form_que_num').val();
                            },
                            que_id: function(){
                                return $('#que_info_form_que_id').val();
                            },
                            que_type: 1
                        }
                    }
                },
                'que_info_form[que_length]':{isNumber:true},
                'que_info_form[que_time]':{isNumber:true},
                'que_info_form[ring_time]':{isNumber:true},
                'que_info_form[next_wait]':{isNumber:true},
                'que_info_form[noans_times]':{isNumber:true},
                'que_info_form[noans_wait]':{isNumber:true},
                'que_info_form[wait_audio]':{required:false},
                'que_info_form[que_priority]':{required:true,range:[0,255]}
            },
            messages: {
                'que_info_form[que_name]': {required:"{{ 'Skill group name cannot be empty'|trans  }}", remote:'{{ 'The skill set already exists'|trans }}', maxlength: '{{ 'Skill group name cannot exceed 20 characters'|trans }}'},
                'que_info_form[que_priority]':{range:"{{ 'The range of skills for the 0-255 group priority'|trans }}"},
                'que_info_form[que_num]':{remote:"{{ 'Skill group number already exists'|trans }}", maxlength: '{{ 'Skill group number cannot exceed 30 characters'|trans }}'}
            },
            submitHandler:function(form){
                var turnUp = $(".radios:checked").val();
                if (turnUp == 2) {
                    var radisDate = $(".radisDate:checked").val();
                    if (radisDate == 2) {
                        //判断日期间隔
                        var startDate = $('#start_date').val();
                        var endDate = $('#end_date').val();
                        if (startDate.length == 0 || endDate.length == 0) {
                            gritterAlert('提示', '日期不能为空值', 'error');
                            return;
                        }
                        if (todate(endDate) < todate(startDate)) {
                            gritterAlert('提示', '日期'+endDate+'不能小于'+startDate, 'error');
                            return;
                        }
                    }

                    var val = $('#cloneDiv:hidden').find(".noWork").attr('value');
                    for(var i=1;i<=val;i++){
                        if($("#start_time" + i).length > 0)
                        {
                            var start_time = $('#start_time'+ i).val();
                            var end_time = $('#end_time'+ i).val();
                            if (start_time.length == 0 || end_time.length == 0) {
                                gritterAlert('提示', '非工作时间段不能为空值', 'error');
                                return;
                            }
                            var obj = document.getElementsByName("weeks"+i+"[]");
                            var check_val = [];
                            for(k in obj){
                                if(obj[k].checked)
                                    check_val.push(1);
                            }
                            if(check_val.length == 0){
                                gritterAlert('提示', '必须选择星期', 'error');
                                return;
                            }
                        } else {
                            continue;
                        }
                    }
                    var soundType = $(".soundType:checked").val();
                    var ttsText = $('#ttsText .tts_text').val();
                    var soundId = $('#sound_id').val();

                    if (soundType == 2 && ttsText.length == 0) {
                        gritterAlert('提示', '欢迎语必须设置', 'error');
                        return;
                    }
                    if(soundType == 1 && soundId.length == 0){
                        gritterAlert('提示', '欢迎语必须设置', 'error');
                        return;
                    }
                }
                form.submit();
            }
        });
        jQuery.extend(jQuery.validator.messages, {
            'required':'{{ 'This field is required'|trans }}'
        });
        jQuery.validator.addMethod("isNumber", function(value, element) {
                var reg = /^[1-9]\d*$/;
                return this.optional(element) || (reg.test($.trim(value)));
        }, "{{ 'Must be an integer'|trans }}");
       jQuery.validator.addMethod("isNumberic", function(value, element) {
           var reg = /^[0-9]\d*$/;
           return this.optional(element) || (reg.test($.trim(value)));
       }, "{{ 'Must be a number'|trans }}");

        function addDiv(){
            var cloneDiv = $("#cloneDiv:hidden").clone(true).removeAttr('id').addClass('disCheckBox');
            var noWorkVal = Number(cloneDiv.find(".noWork").attr('value')) + 1;
            $('#cloneDiv:hidden').find(".noWork").attr('value', noWorkVal);
            cloneDiv.find(".noWork").attr('value',noWorkVal);
            cloneDiv.find("#start_time1").attr('id','start_time'+noWorkVal).attr('name','start_time'+noWorkVal).addClass('timetype'+noWorkVal);
            cloneDiv.find("#end_time1").attr('id','end_time'+noWorkVal).attr('name','end_time'+noWorkVal).addClass('timetype'+noWorkVal);
            cloneDiv.find(".weeks").attr('name','weeks'+noWorkVal+'[]');
            cloneDiv.show();
            $('.cloneDiv').last().after(cloneDiv);
            $("#cloneDiv:hidden").find('#start_time1').val(noWorkVal);
            $('.timetype'+noWorkVal).datetimepicker({
                locale: 'zh-cn',
                format: 'HH:mm',
                widgetPositioning:{horizontal:'left'}
            });
            $('.timetype'+noWorkVal).val(''); //先置成*
        }

        function delDiv(e){
            $(e).parents('.cloneDiv').remove();
        }

        function turnUp(val) {
            $soundType = $('#sound_type_data').attr('soundType');
            $dateType = $('#date_type_data').attr('dateType');
            if (val == 2) {
                $('.disCheckBox').show();
                switchShow1($dateType,'start_date','end_date');
                switchOver($soundType);
            } else {
                $('.disCheckBox').hide();
                $('.disCheckBox4').hide();
            }
        }
        $(function () {
            $('.datetype').datetimepicker({
                locale: 'zh-cn',
                format: 'YYYY-MM-DD',
                widgetPositioning:{horizontal:'left'}
            });
            $('.timetype1').datetimepicker({
                locale: 'zh-cn',
                format: 'HH:mm',
                widgetPositioning:{horizontal:'left'}
            });
            $('#sound_id').change(function(){
                var soundId = $('#sound_id').val();
                $('#sound_player').attr('src', "{{ path('icsoc_sound_play') }}?sound_id="+soundId);
            })
        });

        function switchShow1(val, id1, id2)
        {
            if (val == 2) {
                $('#'+id1).attr('disabled', false);
                $('#'+id2).attr('disabled', false);
                $('#date_type_data').attr('dateType',2);
            } else {
                $('#'+id1).attr('disabled', true);
                $('#'+id2).attr('disabled', true);
                $('#date_type_data').attr('dateType',1);
            }
        }
        function switchOver(val) {
            if (val == 2) {
                $('#sound_type_data').attr('soundType',2);
                $('#ttsText').hide();
                $('#soundFile').show();
            } else {
                $('#sound_type_data').attr('soundType',1);
                $('#soundFile').hide();
                $('#ttsText').show();
            }
        }

        //处理时间格式 00:00
        /*function totime(str_time){
            var times = str_time.replace(/:/g,"");
            return times;
        }*/
        //处理日期格式 00-00-00
        function todate(str_time){
            var dates = str_time.replace(/-/g,"");
            return dates;
        }
    </script>
{% endblock %}